<!DOCTYPE html>

<head>
	<title>Flip Turn Template </title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link href="__STATIC__/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<link href="__STATIC__/css/magnific-popup.css" rel="stylesheet"> 
	<link href="__STATIC__/css/templatemo_style.css" rel="stylesheet" type="text/css">	
</head>
<body>
	<div class="main-container">
		<nav class="main-nav">
			<div id="logo" class="left"><a href="#">相册集</a></div>
			<ul class="nav right center-text">
				<li class="btn"><a href="index.html">影像图库</a></li>
				<li class="btn"><a href="{:url('Index/contact')}">上传图片</a></li>
			</ul>
		</nav>
        <div class="copyrights">Collect from <a href="http://www.cssmoban.com/"  title="网站模板">网站模板</a></div>
		<div class="content-container">
			<header>
			<h1 class="center-text">影像图库</h1>
			<br><br>
			<!-- <h2 class="center-text">Flip Turn is free HTML5 responsive <a rel="nofollow" href="http://www.cssmoban.com">website template</a> by templatemo. Credit goes to <a rel="nofollow" href="#">Unsplash</a> for images used in this template. Morbi hendrerit lacinia magna et tempus. Integer placerat sed nulla non tincidunt.</h2> -->
		</header>
		<div>
						<input type="text"  placeholder="图片名称" style="height: 43px;width: 200px;margin-left: 35px">
						<select style="height: 48px;">
							<option>--选择分类--</option>
							<option>人物</option>
							<option>动物</option>
							<option>风景</option>
						</select>
						<button type="submit" style="height: 48px;width: 70px;background-color:#a2c044;border-radius:5px;border: none"><span style="color: #ffffff">查询</span></button>
		</div>
		<div id="portfolio-content" class="center-text">
						 
			<div class="portfolio-page" id="page-1">
				<div class="portfolio-group">
					<a class="portfolio-item" href="images/1-large.jpg">
						<img src="__STATIC__/images/1-small.jpg" alt="image 1">

					<!-- 	<ul class="nav">
									<li class="active">1</li>
									<li>2</li>
									<li>3</li>
						</ul> -->
						<div class="detail">
							<h3>Wavy Road</h3>
							<p>Duis ac laoreet mi. Maecenas non lorem sed elit molestie tincidunt. Vestibulum tincidunt libero urna, ut dignissim purus accumsan nec.</p>

								<span class="btn">VIEW</span>
							<!-- <button>删除</button>||<button>修改</button> -->
						</div>
					</a>			
					<br>
					<a href="javascript:;">删除</a>&nbsp;||&nbsp;<a href="javascript:;">修改</a>
				</div>


				<div class="portfolio-group">
					<a class="portfolio-item" href="__STATIC__/images/2-large.jpg">
						<img src="__STATIC__/images/2-small.jpg" alt="image 2">
						<div class="detail">
							<h3>Rocky Mountain</h3>
							<p>Sed in molestie lectus. Curabitur non est neque. Maecenas id luctus ligula. Duis ac laoreet mi. Maecenas non lorem sed elit molestie tincidunt.</p>
							<span class="btn">View</span>
						</div>
					</a>		
					<br>		
					<a href="javascript:;">删除</a>&nbsp;||&nbsp;<a href="javascript:;">修改</a>
				</div>
				<div class="portfolio-group">
					<a class="portfolio-item" href="__STATIC__/images/3-large.jpg">
						<img src="__STATIC__/images/3-small.jpg" alt="image 3">
						<div class="detail">
							<h3>Clear River</h3>
							<p>Duis ac laoreet mi. Maecenas non lorem sed elit molestie tincidunt. Vestibulum tincidunt libero urna, ut dignissim purus accumsan nec.</p>
							<span class="btn">View</span>
						</div>
					</a>
					<br>
					<a href="javascript:;">删除</a>&nbsp;||&nbsp;<a href="javascript:;">修改</a>				
				</div>
				<div class="portfolio-group">
					<a class="portfolio-item" href="__STATIC__/images/4-large.jpg">
						<img src="__STATIC__/images/4-small.jpg" alt="image 4">
						<div class="detail">
							<h3>Rounded Flower</h3>
							<p>Sed in molestie lectus. Curabitur non est neque. Maecenas id luctus ligula. Mauris dignissim ante eu arcu ultricies, at sodales orci aliquet.</p>
							<span class="btn">View</span>
						</div>
					</a>
					<br>
					<a href="javascript:;">删除</a>&nbsp;||&nbsp;<a href="javascript:;">修改</a>				
				</div>
				<div class="portfolio-group">
					<a class="portfolio-item" href="__STATIC__/images/5-large.jpg">
						<img src="__STATIC__/images/5-small.jpg" alt="image 5">
						<div class="detail">
							<h3>Bustling City</h3>
							<p>Duis ac laoreet mi. Vestibulum tincidunt libero urna, ut dignissim purus accumsan nec. Sed in molestie lectus. Curabitur non est neque.</p>
							<span class="btn">View</span>
						</div>
					</a>
					<br>
					<a href="javascript:;">删除</a>&nbsp;||&nbsp;<a href="javascript:;">修改</a>					
				</div>
				<div class="portfolio-group">
					<a class="portfolio-item" href="__STATIC__/images/6-large.jpg">
						<img src="__STATIC__/images/6-small.jpg" alt="image 6">
						<div class="detail">
							<h3>Retired Leaves</h3>
							<p>Sed in molestie lectus. Curabitur non est neque. Maecenas id luctus ligula. Mauris dignissim ante eu arcu ultricies, at sodales orci aliquet.</p>
							<span class="btn">View</span>
						</div>
					</a>
					<br>
					<a href="javascript:;">删除</a>&nbsp;||&nbsp;<a href="javascript:;">修改</a>					
				</div>
				<div class="portfolio-group">
					<a class="portfolio-item" href="__STATIC__/images/7-large.jpg">
						<img src="__STATIC__/images/7-small.jpg" alt="image 7">
						<div class="detail">
							<h3>Clean Design</h3>
							<p>Vestibulum tincidunt libero urna, ut dignissim purus accumsan nec. Maecenas id luctus ligula. Mauris dignissim ante eu arcu ultricies, at sodales orci aliquet.</p>
							<span class="btn">View</span>
						</div>
					</a>
					<br>
					<a href="javascript:;">删除</a>&nbsp;||&nbsp;<a href="javascript:;">修改</a>				
				</div>
				<div class="portfolio-group">
					<a class="portfolio-item" href="__STATIC__/images/8-large.jpg">
						<img src="__STATIC__/images/8-small.jpg" alt="image 8">
						<div class="detail">
							<h3>Rock Solid</h3>
							<p>Duis ac laoreet mi. Maecenas non lorem sed elit molestie tincidunt. Mauris dignissim ante eu arcu ultricies, at sodales orci aliquet.</p>
							<span class="btn">View</span>
						</div>
					</a>
					<br>
					<a href="javascript:;">删除</a>&nbsp;||&nbsp;<a href="javascript:;">修改</a>					
				</div>
			</div>
			<div class="portfolio-page" id="page-2" style="display:none;">
				<div class="portfolio-group">
					<a class="portfolio-item" href="__STATIC__/images/8-large.jpg">
						<img src="__STATIC__/images/8-small.jpg" alt="image 8">
						<div class="detail">
							<h3>Wavy Road</h3>
							<p>Duis ac laoreet mi. Maecenas non lorem sed elit molestie tincidunt. Sed in molestie lectus. Curabitur non est neque.</p>
							<span class="btn">View</span>
						</div>
					</a>
					<br>
					<a href="javascript:;">删除</a>&nbsp;||&nbsp;<a href="javascript:;">修改</a>					
				</div>
				<div class="portfolio-group">
					<a class="portfolio-item" href="__STATIC__/images/7-large.jpg">
						<img src="__STATIC__/images/7-small.jpg" alt="image 7">
						<div class="detail">
							<h3>Rocky Mountain</h3>
							<p>Sed in molestie lectus. Curabitur non est neque. Maecenas id luctus ligula. Mauris dignissim ante eu arcu ultricies, at sodales orci aliquet. Duis ac laoreet mi.</p>
							<span class="btn">View</span>
						</div>
					</a>
					<br>
					<a href="javascript:;">删除</a>&nbsp;||&nbsp;<a href="javascript:;">修改</a>					
				</div>
				<div class="portfolio-group">
					<a class="portfolio-item" href="__STATIC__/images/6-large.jpg">
						<img src="__STATIC__/images/6-small.jpg" alt="image 6">
						<div class="detail">
							<h3>Clear River</h3>
							<p>Duis ac laoreet mi. Maecenas non lorem sed elit molestie tincidunt. Vestibulum tincidunt libero urna, ut dignissim purus accumsan nec. Sed in molestie lectus.</p>
							<span class="btn">View</span>
						</div>
					</a>
					<br>
					<a href="javascript:;">删除</a>&nbsp;||&nbsp;<a href="javascript:;">修改</a>					
				</div>
				<div class="portfolio-group">
					<a class="portfolio-item" href="__STATIC__/images/5-large.jpg">
						<img src="__STATIC__/images/5-small.jpg" alt="image 5">
						<div class="detail">
							<h3>Rounded Flower</h3>
							<p>Sed in molestie lectus. Curabitur non est neque. Maecenas id luctus ligula. Mauris dignissim ante eu arcu ultricies, at sodales orci aliquet.</p>
							<span class="btn">View</span>
						</div>
					</a>
					<br>
					<a href="javascript:;">删除</a>&nbsp;||&nbsp;<a href="javascript:;">修改</a>					
				</div>
				<div class="portfolio-group">
					<a class="portfolio-item" href="__STATIC__/images/4-large.jpg">
						<img src="__STATIC__/images/4-small.jpg" alt="image 4">
						<div class="detail">
							<h3>Bustling City</h3>
							<p>Duis ac laoreet mi. Maecenas non lorem sed elit molestie tincidunt. Vestibulum tincidunt libero urna, ut dignissim purus accumsan nec.</p>
							<span class="btn">View</span>
						</div>
					</a>
					<br>
					<a href="javascript:;">删除</a>&nbsp;||&nbsp;<a href="javascript:;">修改</a>					
				</div>
                
				<div class="portfolio-group">
					<a class="portfolio-item" href="__STATIC__/images/3-large.jpg">
						<img src="__STATIC__/images/3-small.jpg" alt="image 3">
						<div class="detail">
							<h3>Retired Leaves</h3>
							<p>Sed in molestie lectus. Curabitur non est neque. Maecenas id luctus ligula. Mauris dignissim ante eu arcu ultricies, at sodales orci aliquet.</p>
							<span class="btn">View</span>
						</div>
					</a>
					<br>
					<a href="javascript:;">删除</a>&nbsp;||&nbsp;<a href="javascript:;">修改</a>					
				</div>
				<div class="portfolio-group">
					<a class="portfolio-item" href="__STATIC__/images/2-large.jpg">
						<img src="__STATIC__/images/2-small.jpg" alt="image 2">
						<div class="detail">
							<h3>Clean Design</h3>
							<p>Vestibulum tincidunt libero urna, ut dignissim purus accumsan nec. Sed in molestie lectus. Curabitur non est neque. Maecenas id luctus ligula.</p>
							<span class="btn">View</span>
						</div>
					</a>
					<br>
					<a href="javascript:;">删除</a>&nbsp;||&nbsp;<a href="javascript:;">修改</a>					
				</div>
				<div class="portfolio-group">
					<a class="portfolio-item" href="__STATIC__/images/1-large.jpg">
						<img src="__STATIC__/images/1-small.jpg" alt="image 1">
						<div class="detail">
							<h3>Rock Solid</h3>
							<p>Duis ac laoreet mi. Maecenas non lorem sed elit molestie tincidunt. Maecenas id luctus ligula. Mauris dignissim ante eu arcu ultricies, at sodales orci aliquet.</p>
							<span class="btn">View</span>
						</div>
					</a>
					<br>
					<a href="javascript:;">删除</a>&nbsp;||&nbsp;<a href="javascript:;">修改</a>					
				</div>
			</div>
			<div class="portfolio-page" id="page-3" style="display:none;">
				<div class="portfolio-group">
					<a class="portfolio-item" href="__STATIC__/images/3-large.jpg">
						<img src="__STATIC__/images/3-small.jpg" alt="image 3">
						<div class="detail">
							<h3>Wavy Road</h3>
							<p>Duis ac laoreet mi. Maecenas non lorem sed elit molestie tincidunt. Vestibulum tincidunt libero urna, ut dignissim purus accumsan nec. Curabitur non est neque.</p>
							<span class="btn">View</span>
						</div>
					</a>
					<br>
					<a href="javascript:;">删除</a>&nbsp;||&nbsp;<a href="javascript:;">修改</a>					
				</div>
				<div class="portfolio-group">
					<a class="portfolio-item" href="__STATIC__/images/2-large.jpg">
						<img src="__STATIC__/images/2-small.jpg" alt="image 2">
						<div class="detail">
							<h3>Rocky Mountain</h3>
							<p>Sed in molestie lectus. Curabitur non est neque. Maecenas id luctus ligula. Mauris dignissim ante eu arcu ultricies, at sodales orci aliquet. Duis ac laoreet mi.</p>
							<span class="btn">View</span>
						</div>
					</a>
					<br>
					<a href="javascript:;">删除</a>&nbsp;||&nbsp;<a href="javascript:;">修改</a>					
				</div>
				<div class="portfolio-group">
					<a class="portfolio-item" href="__STATIC__/images/4-large.jpg">
						<img src="__STATIC__/images/4-small.jpg" alt="image 4">
						<div class="detail">
							<h3>Clear River</h3>
							<p>Duis ac laoreet mi. Maecenas non lorem sed elit molestie tincidunt. Vestibulum tincidunt libero urna, ut dignissim purus accumsan nec. Sed in molestie lectus.</p>
							<span class="btn">View</span>
						</div>
					</a>				
				</div>
				<div class="portfolio-group">
					<a class="portfolio-item" href="__STATIC__/images/1-large.jpg">
						<img src="__STATIC__/images/1-small.jpg" alt="image 1">
						<div class="detail">
							<h3>Rounded Flower</h3>
							<p>Sed in molestie lectus. Curabitur non est neque. Maecenas id luctus ligula. Mauris dignissim ante eu arcu ultricies, at sodales orci aliquet. </p>
							<span class="btn">View</span>
						</div>
					</a>
					<br>
					<a href="javascript:;">删除</a>&nbsp;||&nbsp;<a href="javascript:;">修改</a>					
				</div>
				<div class="portfolio-group">
					<a class="portfolio-item" href="__STATIC__/images/5-large.jpg">
						<img src="__STATIC__/images/5-small.jpg" alt="image 5">
						<div class="detail">
							<h3>Bustling City</h3>
							<p>Duis ac laoreet mi. Maecenas non lorem sed elit molestie tincidunt. Vestibulum tincidunt libero urna, ut dignissim purus accumsan nec. Curabitur non est neque.</p>
							<span class="btn">View</span>
						</div>
					</a>
					<br>
					<a href="javascript:;">删除</a>&nbsp;||&nbsp;<a href="javascript:;">修改</a>					
				</div>
				<div class="portfolio-group">
					<a class="portfolio-item" href="__STATIC__/images/6-large.jpg">
						<img src="__STATIC__/images/6-small.jpg" alt="image 22">
						<div class="detail">
							<h3>Retired Leaves</h3>
							<p>Sed in molestie lectus. Curabitur non est neque. Maecenas id luctus ligula. Mauris dignissim ante eu arcu ultricies, at sodales orci aliquet.</p>
							<span class="btn">View</span>
						</div>
					</a>
					<br>
					<a href="javascript:;">删除</a>&nbsp;||&nbsp;<a href="javascript:;">修改</a>					
				</div>
				<div class="portfolio-group">
					<a class="portfolio-item" href="__STATIC__/images/8-large.jpg">
						<img src="__STATIC__/images/8-small.jpg" alt="image 8">
						<div class="detail">
							<h3>Clean Design</h3>
							<p>Vestibulum tincidunt libero urna, ut dignissim purus accumsan nec. Sed in molestie lectus. Curabitur non est neque. Maecenas id luctus ligula.</p>
							<span class="btn">View</span>
						</div>
					</a>
					<br>
					<a href="javascript:;">删除</a>&nbsp;||&nbsp;<a href="javascript:;">修改</a>					
				</div>
				<div class="portfolio-group">
					<a class="portfolio-item" href="__STATIC__/images/7-large.jpg">
						<img src="__STATIC__/images/7-small.jpg" alt="image 7">
						<div class="detail">
							<h3>Rock Solid</h3>
							<p>Duis ac laoreet mi. Maecenas non lorem sed elit molestie tincidunt. Maecenas id luctus ligula. Mauris dignissim ante eu arcu ultricies, at sodales orci aliquet.</p>
							<span class="btn">View</span>
						</div>
					</a>
					<br>
					<a href="javascript:;">删除</a>&nbsp;||&nbsp;<a href="javascript:;">修改</a>					
				</div>
			</div> <!-- page 3 -->		
			<div class="pagination">
				<ul class="nav">
					<li class="active">1</li>
					<li>2</li>
					<li>3</li>
				</ul>
			</div>
		</div>
	</div>	<!-- /.content-container -->	
    
		<footer>
			<p>Copyright &copy; 2084 Your Company Name Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a> - More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a></p>
			<div class="social right">
				<a href="#"><i class="fa fa-facebook"></i></a>
				<a href="#"><i class="fa fa-twitter"></i></a>
				<a href="#"><i class="fa fa-google-plus"></i></a>
				<a href="#"><i class="fa fa-dribbble"></i></a>
				<a href="#"><i class="fa fa-instagram"></i></a>
				<a href="#"><i class="fa fa-linkedin"></i></a>
			</div>
		</footer>
	</div>
	<script type="text/javascript" src="__STATIC__/js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="__STATIC__/js/jquery.easing.1.3.js"></script>
	<script type="text/javascript" src="__STATIC__/js/modernizr.2.5.3.min.js"></script>
	<script type="text/javascript" src="__STATIC__/js/jquery.magnific-popup.min.js"></script> 
	<script type="text/javascript" src="__STATIC__/js/templatemo_script.js"></script>
	<script type="text/javascript">
		$(function () {
			$('.pagination li').click(changePage);
			$('.portfolio-item').magnificPopup({ 
				type: 'image',
				gallery:{
					enabled:true
				}
			});
		});
	</script>	
</body>
</html>